{% extends "base/base.html" %}
{% block body %}
	<div class='blockContent'>
		<!--<div>当前字段:<span class='curField' id='curField'></span></div>-->
		<div class='bottomDiv'>
			<table>
				<tr>
					<!-- 改用拖动方式 <td class='tree' id='formTree'></td>-->
					<td class='comp' id='compDiv'>
						
					</td>
					<td class='compEdit' id='compEditDiv'>
						
					</td>
				</tr>
			</table>
		</div>
		<div class='paramDiv'>
			<div class='title'>参数配置</div>
			<div id='paramDiv'></div>
			<div style='float:none;clear:both;margin-top:10px;text-align:center;'>
				<button class='btn' callFunc='click:preShow'>预览</button>
				<button class='btn' callFunc='click:delField'>删除</button>
				<button class='btn' callFunc='click:createScript'>填写脚本</button>
				<button class='btn' callFunc='click:submitForm'>创建表单</button>
				<button class='btn' callFunc='click:createHtml'>创建html</button>
			</div>
		</div>
	</div>

{% endblock %}
{% block script %}
	var tree=$("#formTree");
	var id=$.search("id");
	var comp=$("#compDiv");
	var compEdit=$("#compEditDiv");
	var tempDiv="<li callFunc='click:doCheck'></li>";
	var editDiv=$("#paramDiv");
	var tempSpan="<span class='editSpan' callFunc='mousedown:editParam drop:sortForm' drag=true ></span>";
	//当前选定字段
	var curItem=null;
	//当前模块
	var curBlock=compEdit;
	var oldBean={};
	var scriptDiv=$("<div class='_script_div'><div class='_func_div'><label>组件包含函数:</label><span></span></div>"+
					<!--"<div><input readonly=true ></input><button class='btn' callFunc='click:submitFile'>上传文件</button></div>"+-->
					"<div><textarea class='submitField' name='script'></textarea></div>"+
					"<div align=center ><button class='btn' callFunc='click:saveScript'>确定</button></div></div>");
					
	var formJson={};
	
	function fillForm(){
		$(oldBean.fields).each(setField);
	}
	function setField(){
		var item=$id(this.fieldType);
		yanhx.findFunc("setField")(this);
		if(this.param.childs&&this.param.childs.length){
			$(this.param.childs).each(setField);
		}
	}
	function $id(id){
		return $(document.getElementById(id));
	}
	yanhx.addFunc("setField",function(param){
		var fieldType=param.fieldType;
		var code=param.param;
		if(!curBlock.parents("#compEditDiv").length){
			curBlock=null;
			curBlock=compEdit;
		}
		$.syncPost("/do?action=htmlHandle.getComp",{key:fieldType,item:JSON.stringify(code)},function(ret){
		    var item=$(tempSpan);
		    item.html(ret.html);
			if(fieldType.indexOf("Block")>-1){
				item.appendTo(compEdit);
				curBlock=item.find("div.blockContent");
			}
			else{
				item.appendTo(curBlock);
			}
			item.data("jsonValue",param);
		});
	})
	yanhx.addFunc("doCheck",function(){
		var elem=this;
		var data=elem.data("jsonValue");
		try{
			eval("var code="+data.code);
		}catch(e){
			var code={};
		}
		var fieldType=elem.attr("id");
		if(!curBlock.parents("#compEditDiv").length){
			curBlock=null;
			curBlock=compEdit;
		}
		$.postJSON("/do?action=htmlHandle.getComp",{key:fieldType,item:JSON.stringify(code)},function(ret){
		    var item=$(tempSpan);
		    item.html(ret.html);
			if(fieldType.indexOf("Block")>-1){
				item.appendTo(compEdit);
				curBlock=item.find("div.blockContent");
			}
			else{
				item.appendTo(curBlock);
			}
			setCurItem(item);
			//生成参数配置
			yanhx.exec("_form_param",{
				data:code,
				elem:editDiv
			});
			item.data("jsonValue",{
				param:code,
				fieldType:elem.attr("id")
			});
		});
	});
	yanhx.addFunc("sortForm",function(){
		var o=compEdit.offset();
		var obj={
			x:event.pageX,
			y:event.pageY
		}
		if((obj.x-o.left<-10)||(obj.y-o.top)<-10){
			yanhx.exec("delField");
		}
	});
	yanhx.addFunc("editParam",function(){
		yanhx.exec("noBubble");
		//未变化 则不处理
		if(this.hasClass("_form_curField"))
			return;
		setCurItem(this);
		var cfg=this.data("jsonValue");
		yanhx.exec("_form_param",{
			data:cfg.param,
			elem:editDiv
		});
		if(cfg.fieldType.indexOf("Block")>-1){
			curBlock=curItem.find("div.blockContent");;
		}
		editDiv.fill(cfg.param);
	});
	
	function setCurItem(item){
		if(curItem){
			curItem.removeClass("_form_curField");
			curItem.data("jsonValue").param=editDiv.getBean();
		}
		curItem=item;
		curItem.addClass("_form_curField");
	}
	yanhx.addFunc("delField",function(){
		curItem.remove();
		curItem=null;
		editDiv.parent().hide();
	});
	yanhx.addFunc("preShow",function(){
		bean=editDiv.getBean();
		var temp=curItem.data("jsonValue");
		temp.param=bean;
		$.postJSON("/do?action=htmlHandle.getComp",{key:temp.fieldType,item:JSON.stringify(bean)},function(ret){
			curItem.html(ret.html);
		});
	});
	yanhx.addCommon('load',function(){
		$.postJSON('/do?action=htmlHandle.queryForm&id='+id,function(data){
			var str=data.form;
			if(str){
				oldBean=JSON.parse(str);
				//编辑表单
				fillForm();
				if(oldBean&&oldBean.script){
					$.postJSON("/do?action=htmlHandle.getScript",{name:oldBean.script},function(ret){
						scriptDiv.find("textarea").val(ret.script);
					})
				}
			}
		});
		$.postJSON("/do?action=template.queryAll",null,function(data){
			$(data).each(function(){
				var temp=$(tempDiv).text(this.name+"("+this.version+")").attr("id",this.jsonKey+this.version).appendTo(comp);
				temp.attr("jqueryKey",this.jsonKey+this.version.replace(".","_"));
				temp.data("jsonValue",this);
			});
		});
	});
	yanhx.addFunc("createScript",function(){
		//收集表单
		curItem.data("jsonValue").param=editDiv.getBean();
		var spans=compEdit.find("span.editSpan");
		var arr=[];
		spans.each(function(){
			var func=$(this).data("jsonValue").param._func;
			if(func)
				arr.push(func);
		});
		scriptDiv.find("div._func_div").children("span").text(arr.join(","));
		yanhx.exec("myWin.open",{
			title:'脚本',
			elem:scriptDiv,
			model:true
		});
	});
	yanhx.addFunc("saveScript",function(){
		var bean=yanhx.exec("fillHandle.submit",{
			elem:scriptDiv
		})
		var str=bean.script.trim();
		if(str==""){
			yanhx.exec("myWin.alert",{
				content:'内容为空'
			});
		}
		else{
			$.postJSON('/do?action=htmlHandle.saveScript',{id:id,script:str},function(data){
				formJson["script"]=data.fileName;
				yanhx.exec("myWin.closeWin");
				yanhx.exec("myWin.alert",{
					content:'保存成功'
				});
			});
		}
	});
	yanhx.addFunc("submitForm",function(){
		var temp={};
		temp.fields=[];
		temp.script=formJson.script;
		curItem.data("jsonValue").param=editDiv.getBean();
		//暂时只处理2层
		compEdit.children("span.editSpan").each(function(){
			var obj=$(this).data("jsonValue");
			var subs=[];
			
			//填充子节点
			$(this).find("span.editSpan").each(function(){
				var tt=$(this).data("jsonValue");
				subs.push(tt);
			});
			obj.param.childs=subs;
			temp.fields.push(obj);
		});
		$.postJSON('/do?action=htmlHandle.saveJson',{json:JSON.stringify(temp),id:id},function(data){
			yanhx.exec("myWin.alert",{
				content:'创建成功'
			});
		});
		
	});
	yanhx.addFunc("createHtml",function(){
		$.postJSON('/do?action=htmlHandle.saveHtml',{id:id},function(data){
			yanhx.exec("myWin.alert",{
				content:'创建成功'
			});
		});
	});
	{% block tree %}
	
	{% endblock %}
{% endblock %}